<template>
    <div class="tabbar">
        <div class="tabitem "  
        v-for="tab,index in tabs" :key="tab.id"    @click="tabClick(index)"
         :class="{'active':index===currentIndex}"
        >
           <img :src="tab.img_path" alt="图片加载失败" :class="{'img-active':currentIndex===index}">
           <div>{{ tab.title }}</div>
        </div>
    </div>
</template>

<script setup>
import tabs from "../../resets/datas/tabbar.js"
import { useRouter } from "vue-router";
import {ref} from 'vue'
let currentIndex = ref(0);
const router = useRouter();
function tabClick(index) {
    currentIndex.value = index;
    router.push(tabs[index].path);
}
</script>


<style lang="less" scoped>
.tabbar
{
    display: flex;
    justify-content: space-between;
    flex: 1;
    position: fixed;
    bottom: 0;
    right: 20px;
    left: 20px;
     background-color: #fff;
    .tabitem{
        cursor: pointer;
        img
        {
            width: 32px;
        }
    }

    .active
    {
        color: orange;
        .img-active
        {
            background-color: orange;
        }
    }

}
</style>